<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/29
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" href="../layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }
        /*.layui-table img{
            max-width: auto;
        }*/
    </style>
    <script type="text/javascript">
        layui.use(['layer', 'form',"table","jquery","upload"], function(){
            var layer = layui.layer
            var form = layui.form;
            var table=layui.table
            var $=layui.jquery
            var upload = layui.upload;
            table.render({
                elem:"#article"
                ,url:"${pageContext.request.contextPath}/selectArticleByPage"
                ,toolbar:"#toolbarDemo"
                ,page:true
                ,cols:[[
                    {field:"articleId",title:"编号",align:"center"}
                    ,{field:"articleName",title:"文章名字",align:"center"}
                    ,{field:"articleImage",title:"文章图片",templet:"#tupianTemplet",align:"center"}
                    ,{field:"articleContent",title:"内容",align:"center"}
                    ,{title:"上师昵称",templet:"#nichengTemplet",align:"center"}
                    ,{field:"articleDate",title:"发表时间",align:"center"}
                    ,{title:"操作",templet:"#caoZuoTemplet",align:"center"}
                ]]
            })

            table.on('toolbar(articleFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event=="add") {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/selectAllGuru"
                        ,async:false
                        ,success:function (data) {
                            //console.log(data.treeNodes)
                            for (var i=0;i<data.length;i++){
                                //console.log(data.treeNodes[i].title)
                                $("#dep").append("<option value='"+data[i].guruId+"'>"+data[i].guruNickname+"</option>")
                            }
                        }
                    })

                    form.render(); //更新全部
                    $("#addform")[0].reset()//清空表单
                    //alert("ooo")
                    layer.open({
                        type: 1,
                        content: $('#addform')
                    })
                }
                /*监听添加工具栏======end*/
            });
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '${pageContext.request.contextPath}/uploadArticle' //上传接口
                ,done: function(res){
                    console.log(res.articleImage)
                    //上传完毕回调
                    $("#img").val(res.articleImage)
                }
                ,error: function(){
                    //请求异常回调
                }
            });
            form.on('submit(submitFilter)', function(data){
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertArticle",
                    data:data.field,
                    success:function (data) {
                        if (data.isAdd) {
                            //关闭弹出框
                            layer.closeAll()
                            //重载table
                            table.reload('article');
                        }else {
                            layer.open({
                                content:"输入有误,请重新输入"
                            });
                        }
                    }

                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*监听添加工具栏======end*/


            //监听行工具栏
            table.on('tool(articleFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/deleteArticle",
                            data:{"id":data.articleId}
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //console.log(data.departmentId)
                    //发送ajax根据id查对象
                    $.ajax({
                        url:"${pageContext.request.contextPath}/selectOneArticle"
                        ,async:false
                        ,data:{"id":data.articleId}
                        ,success:function (da) {
                            //给表单赋值
                            // alert(data)
                            console.log(da.article.guru.guruId)
                            //console.log(da)
                          $.ajax({
                                url:"${pageContext.request.contextPath}/selectAllGuru"
                                ,async:false
                                ,success:function (data) {
                                   // var str=''

                                    for (var i=0;i<data.length;i++){
                                       /* str+="<option value='"+data[i].guruId+"'"
                                        console.log(da.article.guru.guruId)
                                        if (da.article.guru.guruId == data[i].guruId) {
                                            console.log(data[i].guruId+"&&&&&&&&&")
                                            str+= " selected='selected'"
                                        }
                                        str+=">"+data[i].guruNickname+"</option>"*/
                                        //console.log(str)
                                        //$("#shangshi").append(str)
                                        //$("#dep").append("<input type='text' value='"+data.treeNodes[i].id+"' value='"+data.treeNodes[i].title+"' readonly='' class='layui-input layui-unselect'>")
                                        $('#shangshi').append(new Option(data[i].guruNickname,data[i].guruId));//往下拉菜单里添加元素
                                    }
                                  //option  第一个参数是页面显示的值，第二个参数是传递到后台的值
                                  $("#shangshi").val(da.article.guru.guruId)
                                   // $("#shangshi").html(str)
                                    //console.log(str)
                                }
                            })
                           /* $.ajax({
                                url:"${pageContext.request.contextPath}/selectAllGuru"
                                ,async:false
                                ,success:function (data) {
                                    //console.log(data.treeNodes)
                                    for (var i=0;i<data.length;i++){
                                        //console.log(data.treeNodes[i].title)
                                        $("#shangshi").append("<option value='"+data[i].guruId+"'>"+data[i].guruNickname+"</option>")
                                    }
                                }
                            })*/
                            form.render()
                            form.val('updateFormFilter', da.article);

                        }
                    })
                    //form.render(); //更新全部
                    //弹出修改表单
                    layer.open({
                        type: 1,
                        content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                       /* ,end:function(){
                            window.location.reload();
                        }*/
                    });


                }
            });
            /*//监听行工具栏=========end*/

            //执行实例
            var uploadInst = upload.render({
                elem: '#xiugai' //绑定元素
                ,url: '${pageContext.request.contextPath}/uploadArticle'//上传接口
                ,done: function(res){
                    console.log(res.articleImage)
                    //上传完毕回调
                    $("#img2").val(res.articleImage)

                }
                ,error: function(){
                    //请求异常回调
                }
            });
            //监听修改状态修改表单内容
            form.on('submit(updateSubmitFilter)', function(data){
                /*console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/updateArticle"
                    ,data:data.field
                    ,success:function (data) {
                        var msg="修改失败"
                        if (data.isUpdate) {
                            msg="修改成功"
                            layer.closeAll()
                            table.reload('article');
                        }
                        layer.msg(msg)
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });

    </script>

    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="tupianTemplet">
        <img src="${pageContext.request.contextPath}/image/{{d.articleImage}}" height="100px">
    </script>
    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="nichengTemplet">
        {{d.guru.guruNickname}}
    </script>
    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="caoZuoTemplet">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
    </script>
</head>
<body>
<table id="article" lay-filter="articleFilter"></table>

<!--//添加表单-->
<form class="layui-form" style="display: none;" id="addform" lay-filter="formFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">文章名字:</label>
        <div class="layui-inline">
            <input type="text" name="articleName" lay-verify="required" placeholder="请输入科室名称"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章图片:</label>
        <div class="layui-inline">
            <input type="hidden" id="img"  name="articleImage" value="">

            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>文章图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择上师:</label>
        <div class="layui-inline">
            <select name="guruId" lay-filter="aihao" id="dep">
                <%--<option value="0" selected="selected">写作</option>--%>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章内容:</label>
        <div class="layui-inline">
            <textarea name="articleContent" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<!--//修改表单-->
<form class="layui-form" style="display: none;" id="updateForm" lay-filter="updateFormFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">文章名字:</label>
        <div class="layui-inline">
            <input type="text" name="articleName" lay-verify="required" placeholder="请输入科室名称"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章图片:</label>
        <div class="layui-inline">
            <input type="hidden" id="img2"  name="articleImage" value="">
            <input type="hidden" id="articleId"  name="articleId" value="">
            <button type="button" class="layui-btn" id="xiugai">
                <i class="layui-icon">&#xe67c;</i>文章图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择上师:</label>
        <div class="layui-inline">
            <select name="guruId" id="shangshi">
                <!--<option value="0">写作</option>-->
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章内容:</label>
        <div class="layui-inline">
            <textarea name="articleContent" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</body>
</html>
